<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>grid</title>
	<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css"/>
	<script type="text/javascript" src="../js/ext-base.js"></script>
	<script type="text/javascript" src="../js/ext-all-debug.js"></script>
	<script type="text/javascript" src="../js/ext-lang-zh_CN.js"></script>
	<style>
        <!--
        .new-tab {
		    background-image:url(tabs.gif ) !important;
		}
        body{
        	width: 100%;
        	height: 100%
        }
        .gridPanel1{
        	float:left;
        	width:45%; 
        	height:100%;
        }
        .gridPanel2{
        	float:left; 
        	width:45%; 
        	height:100%;
        }
        .rightArrow{
        	background:transparent url(../resources/images/default/panel/tools-sprites-trans.gif) no-repeat scroll 0pt -165px !important;
        	height:15px;
        	width:16px;
        	overflow:hidden; 	
        }
        .leftArrow{
        	background:transparent url(../resources/images/default/panel/tools-sprites-trans.gif) no-repeat scroll 0pt -180px !important;
        	height:15px;
        	width:16px;
        	overflow:hidden; 	
        }
        .centerDiv{
        	width:10%;
        	text-align: center;
        	float: left;
        }
        //-->
        </style>
        <script type="text/javascript">
Ext.onReady(function(){

    var ds1 = new Ext.data.Store({
        proxy: new Ext.data.MemoryProxy([
            ['01','name01','descn01'],
            ['02','name02','descn02'],
            ['03','name03','descn03'],
            ['04','name04','descn04'],
            ['05','name05','descn05']
        ]),
        reader: new Ext.data.ArrayReader({}, [
            {name: 'id'},
            {name: 'name'},
            {name: 'descn'}
        ])
    });
    var ds2 = new Ext.data.Store({
        proxy: new Ext.data.MemoryProxy(),
        reader: new Ext.data.ArrayReader({}, [
            {name: 'id'},
            {name: 'name'},
            {name: 'descn'}
        ])
    });

    ds1.load();
    ds2.load();

    var cm = new Ext.grid.ColumnModel([
        {header:'编号',dataIndex:'id'},
        {header:'名称',dataIndex:'name'},
        {header:'描述',dataIndex:'descn'}
    ]);

    var grid1 = new Ext.grid.GridPanel({
    	width:Ext.get('gridPanel1Div').getWidth(),
        el: 'gridPanel1',
        height:Ext.get('gridPanel1Div').getHeight(),
        ds: ds1,
        cm: cm,
        enableDragDrop: true
    });
    var grid2 = new Ext.grid.GridPanel({
        el: 'gridPanel2',
        width:Ext.get('gridPanel1Div').getWidth(),
        height:Ext.get('gridPanel1Div').getHeight(),
        ds: ds2,
        cm: cm,
        enableDragDrop: true
    });

    grid1.render();
    grid2.render();

    var ddrow1 = new Ext.dd.DropTarget(grid1.view.mainBody, {
        ddGroup : 'GridDD',
        copy    : false,
        notifyDrop : function(dd, e, data) {
            // 选中了多少行
            var rows = data.selections;
            // 拖动到第几行
            var index = dd.getDragData(e).rowIndex;
            if (typeof(index) == "undefined") {
                index = 0;
            }
            // 修改ds
            for(i = 0; i < rows.length; i++) {
                var rowData = rows[i];
                if(!this.copy) ds2.remove(rowData);
                ds1.insert(index, rowData);
            }
        }
    });

    var ddrow2 = new Ext.dd.DropTarget(grid2.view.mainBody, {
        ddGroup : 'GridDD',
        copy    : false,
        notifyDrop : function(dd, e, data) {
            // 选中了多少行
            var rows = data.selections;
            // 拖动到第几行
            var index = dd.getDragData(e).rowIndex;
            if (typeof(index) == "undefined") {
                index = 0;
            }
            // 修改ds
            for(i = 0; i < rows.length; i++) {
                var rowData = rows[i];
                if(!this.copy) ds1.remove(rowData);
                ds2.insert(index, rowData);
            }
        }
    });
	new Ext.Button({
		el:'rightArrow',
        iconCls:'rightArrow',
        minWidth:20,
        handler: function(){
        	var rows = grid1.getSelections();
        	if(rows=='unfinded'){
        		alert("ASF");
        	}else{
        		for(i = 0; i < rows.length; i++) {
	                var rowData = rows[i];
	                if(!this.copy) ds1.remove(rowData);
	                ds2.add(rowData);
	            }
        	}
        }
    }).render();
    new Ext.Button({
		el:'leftArrow',
		iconCls:'leftArrow',
		minWidth:20,
        handler: function(){
        	var rows = grid2.getSelections();
        	if(rows=='unfinded'){
        		alert("ASF");
        	}else{
        		for(i = 0; i < rows.length; i++) {
	                var rowData = rows[i];
	                if(!this.copy) ds2.remove(rowData);
	                ds1.add(rowData);
	            }
        	}
        }
    }).render();   
});
        </script>
    </head>
    <body>
        <div style="width:100%;height:100%">
        <div id="gridPanel1Div" class="gridPanel1">
        	<div id="gridPanel1">
        	</div>
        </div>
        <div id="centerDiv" class="centerDiv">
        	<table align="center" width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
            	<tr>
                	<td align="center">
                        <div id="rightArrow">                     
                   		</div>
                    </td>
                </tr>
                <tr>
                	<td align="center">
                    	<div id="leftArrow">                     
                        </div>
                    </td>
                </tr>
            </table>   	
        </div>
        <div id="gridPanel2Div">
        	<div id="gridPanel2" class="gridPanel2">
        	</div>
        </div>
        </div>
    </body>
</html>
